<template>
	<!-- 快速工单 -->
	<view class="wrap">
		<view>
			<u-tabs-swiper ref="uTabs" :list="tabList" :current="current" @change="tabsChange" :is-scroll="true"
				swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="flex:1;">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" >
					<work-sheet-tab></work-sheet-tab>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" >
					<sheet-list-tab></sheet-list-tab>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import workSheetTab from './components/work-sheet-tab.vue'
	import sheetListTab from './components/sheet-list-tab.vue'
	export default{
		components:{
			workSheetTab,
			sheetListTab
		},
		data(){
			return{
				tabList:[{name:'设备工单'},{name:'我的工单'}],
				current:0,
				swiperCurrent:0,
			}
		},
		methods:{
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.wrap{
		height: calc(100vh);
		display: flex;
		flex-direction: column;
		.swiper-item{
			height: 100%;
		}
	}
</style>
